<template>
  <div class="location-detector-container">
    <div class="detector-header">
      <h3>地理位置检测</h3>
      <p>自动计算当地天文观测条件</p>
    </div>
    
    <!-- 地理位置检测状态 -->
    <div v-if="!locationData" class="location-status">
      <div class="status-content">
        <div class="location-icon">📍</div>
        <p>正在获取您的地理位置...</p>
        <button @click="requestLocation" class="location-button">
          {{ isRequestingLocation ? '获取中...' : '允许定位' }}
        </button>
        <p v-if="locationError" class="error-text">{{ locationError }}</p>
        <p class="location-tip">
          或输入位置信息：
          <input 
            v-model="manualLocation" 
            type="text" 
            placeholder="城市名称"
            @keyup.enter="useManualLocation"
          >
          <button @click="useManualLocation" class="manual-button">使用</button>
        </p>
      </div>
    </div>
    
    <!-- 加载中 -->
    <div v-if="isLoading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>正在计算观测条件...</p>
    </div>
    
    <!-- 位置和观测信息 -->
    <div v-if="locationData && !isLoading" class="location-info">
      <!-- 位置信息卡片 -->
      <div class="info-card location-card">
        <div class="card-header">
          <h4>📍 位置信息</h4>
        </div>
        <div class="card-content">
          <div class="info-grid">
            <div class="info-item">
              <span class="label">位置:</span>
              <span class="value">{{ locationData.city || locationData.region }}, {{ locationData.country }}</span>
            </div>
            <div class="info-item">
              <span class="label">坐标:</span>
              <span class="value">{{ formatCoordinates(locationData.latitude, locationData.longitude) }}</span>
            </div>
            <div class="info-item">
              <span class="label">时区:</span>
              <span class="value">{{ locationData.timezone }}</span>
            </div>
            <div class="info-item">
              <span class="label">当地时间:</span>
              <span class="value">{{ currentLocalTime }}</span>
            </div>
          </div>
          <button @click="refreshLocation" class="refresh-button">更新位置</button>
        </div>
      </div>
      
      <!-- 观测条件卡片 -->
      <div class="info-card observing-card">
        <div class="card-header">
          <h4>🔭 观测条件</h4>
        </div>
        <div class="card-content">
          <div class="observing-overview">
            <div class="condition-badge" :class="observationQuality.class">
              <div class="quality-text">{{ observationQuality.text }}</div>
              <div class="quality-score">{{ observationQuality.score }}/10</div>
            </div>
            <div class="sky-preview">
              <div class="sky-icon">{{ observationQuality.icon }}</div>
              <div class="sky-time">{{ isNight ? '夜晚' : '白天' }}</div>
            </div>
          </div>
          
          <div class="observing-details">
            <div class="detail-item">
              <div class="detail-header">
                <span class="icon">{{ sunIcon }}</span>
                <span class="title">太阳</span>
              </div>
              <div class="detail-content">
                <div class="time-info">
                  <div class="time-item">
                    <span class="time-label">日出:</span>
                    <span class="time-value">{{ sunriseTime }}</span>
                  </div>
                  <div class="time-item">
                    <span class="time-label">日落:</span>
                    <span class="time-value">{{ sunsetTime }}</span>
                  </div>
                </div>
                <div class="sun-position">
                  {{ sunPosition }}
                </div>
              </div>
            </div>
            
            <div class="detail-item">
              <div class="detail-header">
                <span class="icon">{{ moonIcon }}</span>
                <span class="title">月亮</span>
              </div>
              <div class="detail-content">
                <div class="moon-info">
                  <div class="moon-phase">
                    <span class="phase-icon">{{ moonPhase.icon }}</span>
                    <span class="phase-text">{{ moonPhase.text }}</span>
                  </div>
                  <div class="moon-visibility">{{ moonVisibility }}</div>
                </div>
              </div>
            </div>
            
            <div class="detail-item">
              <div class="detail-header">
                <span class="icon">⭐</span>
                <span class="title">可见天体</span>
              </div>
              <div class="visible-objects">
                <div v-for="object in visibleObjects" :key="object.name" class="object-item">
                  <span class="object-icon">{{ object.icon }}</span>
                  <span class="object-name">{{ object.name }}</span>
                  <span class="object-altitude">{{ object.altitude }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 天气和环境卡片 -->
      <div class="info-card weather-card">
        <div class="card-header">
          <h4>🌤️ 环境条件</h4>
        </div>
        <div class="card-content">
          <div class="weather-overview">
            <div class="weather-icon">{{ weatherData.icon }}</div>
            <div class="weather-info">
              <div class="temperature">{{ weatherData.temperature }}°C</div>
              <div class="condition">{{ weatherData.condition }}</div>
            </div>
          </div>
          
          <div class="environmental-details">
            <div class="env-item">
              <span class="env-label">云量:</span>
              <div class="env-value">
                <div class="cloud-bar">
                  <div class="cloud-fill" :style="{ width: weatherData.cloudCover + '%' }"></div>
                </div>
                <span>{{ weatherData.cloudCover }}%</span>
              </div>
            </div>
            <div class="env-item">
              <span class="env-label">湿度:</span>
              <span class="env-value">{{ weatherData.humidity }}%</span>
            </div>
            <div class="env-item">
              <span class="env-label">风速:</span>
              <span class="env-value">{{ weatherData.windSpeed }} km/h</span>
            </div>
            <div class="env-item">
              <span class="env-label">气压:</span>
              <span class="env-value">{{ weatherData.pressure }} hPa</span>
            </div>
            <div class="env-item">
              <span class="env-label">空气质量:</span>
              <span class="env-value" :class="`air-quality-${weatherData.airQualityLevel}`">
                {{ weatherData.airQuality }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 观测建议卡片 -->
      <div class="info-card suggestions-card">
        <div class="card-header">
          <h4>💡 观测建议</h4>
        </div>
        <div class="card-content">
          <div class="suggestions-list">
            <div v-for="(suggestion, index) in observingSuggestions" :key="index" class="suggestion-item">
              <span class="suggestion-icon">{{ suggestion.icon }}</span>
              <span class="suggestion-text">{{ suggestion.text }}</span>
            </div>
          </div>
          <div class="best-time">
            <h5>最佳观测时间:</h5>
            <p>{{ bestObservingTime }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 观测条件可视化 -->
    <div v-if="locationData && !isLoading" class="visualization-container">
      <div class="sky-chart">
        <h4>天空图</h4>
        <div class="chart-content">
          <div class="sky-dome">
            <!-- 简化的天空穹顶可视化 -->
            <div class="dome-grid"></div>
            
            <!-- 太阳位置 -->
            <div 
              class="celestial-body sun" 
              :style="{ 
                top: `${getPosition(sunAltitude, sunAzimuth).y}%`, 
                left: `${getPosition(sunAltitude, sunAzimuth).x}%` 
              }"
            >
              {{ sunIcon }}
            </div>
            
            <!-- 月亮位置 -->
            <div 
              class="celestial-body moon" 
              :style="{ 
                top: `${getPosition(moonAltitude, moonAzimuth).y}%`, 
                left: `${getPosition(moonAltitude, moonAzimuth).x}%` 
              }"
            >
              {{ moonIcon }}
            </div>
            
            <!-- 主要天体位置 -->
            <div 
              v-for="object in visibleObjects" 
              :key="object.name"
              class="celestial-body star" 
              :style="{ 
                top: `${getRandomPosition().y}%`, 
                left: `${getRandomPosition().x}%` 
              }"
            >
              {{ object.icon }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

export default {
  name: 'LocationDetector',
  setup() {
    // 位置相关状态
    const locationData = ref(null)
    const isRequestingLocation = ref(false)
    const locationError = ref('')
    const isLoading = ref(false)
    const manualLocation = ref('')
    
    // 观测数据（模拟）
    const observationQuality = ref({
      score: 0,
      text: '',
      icon: '',
      class: ''
    })
    const sunAltitude = ref(0)
    const sunAzimuth = ref(0)
    const moonAltitude = ref(0)
    const moonAzimuth = ref(0)
    const weatherData = ref({
      icon: '',
      temperature: 0,
      condition: '',
      cloudCover: 0,
      humidity: 0,
      windSpeed: 0,
      pressure: 0,
      airQuality: '',
      airQualityLevel: 0
    })
    const visibleObjects = ref([])
    const moonPhase = ref({
      icon: '',
      text: ''
    })
    const observingSuggestions = ref([])
    
    // 组件挂载时尝试获取位置
    onMounted(() => {
      // 尝试自动获取位置，但不显示错误（避免初次加载就提示错误）
      requestLocation(false)
    })
    
    // 请求位置
    const requestLocation = async (showError = true) => {
      if (isRequestingLocation.value) return
      
      isRequestingLocation.value = true
      locationError.value = ''
      
      try {
        // 检查浏览器是否支持地理定位
        if (!navigator.geolocation) {
          throw new Error('您的浏览器不支持地理定位功能')
        }
        
        // 获取当前位置
        const position = await new Promise((resolve, reject) => {
          navigator.geolocation.getCurrentPosition(resolve, reject, {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 300000 // 5分钟缓存
          })
        })
        
        // 模拟逆地理编码（将坐标转换为位置名称）
        const { latitude, longitude } = position.coords
        await simulateReverseGeocoding(latitude, longitude)
        
      } catch (error) {
        console.error('获取位置失败:', error)
        if (showError) {
          locationError.value = error.message || '无法获取您的位置，请尝试手动输入'
        }
      } finally {
        isRequestingLocation.value = false
      }
    }
    
    // 使用手动输入的位置
    const useManualLocation = async () => {
      if (!manualLocation.value.trim()) return
      
      isLoading.value = true
      locationError.value = ''
      
      try {
        // 模拟地理编码（将位置名称转换为坐标）
        const { latitude, longitude } = await simulateGeocoding(manualLocation.value.trim())
        await simulateReverseGeocoding(latitude, longitude)
      } catch (error) {
        console.error('获取位置信息失败:', error)
        locationError.value = '无法找到该位置，请尝试其他城市名称'
      } finally {
        isLoading.value = false
      }
    }
    
    // 刷新位置
    const refreshLocation = () => {
      requestLocation()
    }
    
    // 模拟逆地理编码
    const simulateReverseGeocoding = async (latitude, longitude) => {
      isLoading.value = true
      
      // 模拟网络请求延迟
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      // 模拟位置数据
      const cities = [
        { name: '北京', country: '中国' },
        { name: '上海', country: '中国' },
        { name: '广州', country: '中国' },
        { name: '纽约', country: '美国' },
        { name: '伦敦', country: '英国' },
        { name: '东京', country: '日本' },
        { name: '悉尼', country: '澳大利亚' },
        { name: '巴黎', country: '法国' }
      ]
      
      const randomCity = cities[Math.floor(Math.random() * cities.length)]
      
      locationData.value = {
        latitude: parseFloat(latitude.toFixed(6)),
        longitude: parseFloat(longitude.toFixed(6)),
        city: randomCity.name,
        region: randomCity.name,
        country: randomCity.country,
        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
      }
      
      // 生成观测数据
      generateObservingData()
      isLoading.value = false
    }
    
    // 模拟地理编码
    const simulateGeocoding = async (locationName) => {
      await new Promise(resolve => setTimeout(resolve, 500))
      
      // 返回模拟坐标
      return {
        latitude: 39.9042 + (Math.random() - 0.5) * 10,
        longitude: 116.4074 + (Math.random() - 0.5) * 10
      }
    }
    
    // 生成观测数据（模拟）
    const generateObservingData = () => {
      const now = new Date()
      const hour = now.getHours()
      const isNightTime = hour < 6 || hour > 18
      
      // 生成观测质量
      const qualityScore = isNightTime ? Math.floor(Math.random() * 5) + 5 : Math.floor(Math.random() * 3)
      const qualityLevels = [
        { score: 0, text: '不适合', icon: '🌧️', class: 'poor' },
        { score: 3, text: '较差', icon: '☁️', class: 'fair' },
        { score: 6, text: '良好', icon: '⛅', class: 'good' },
        { score: 8, text: '优秀', icon: '🌙', class: 'excellent' },
        { score: 9, text: '极佳', icon: '✨', class: 'perfect' }
      ]
      
      observationQuality.value = qualityLevels.find(level => qualityScore >= level.score) || qualityLevels[0]
      
      // 生成太阳位置
      const sunHours = isNightTime ? 23 : hour
      sunAltitude.value = Math.sin((sunHours - 12) * Math.PI / 12) * 90
      sunAzimuth.value = (sunHours * 15 + Math.random() * 5) % 360
      
      // 生成月亮位置
      moonAltitude.value = Math.sin((hour - 18) * Math.PI / 12) * 60 + Math.random() * 20
      moonAzimuth.value = (hour * 10 + Math.random() * 10) % 360
      
      // 生成天气数据
      const weatherConditions = [
        { icon: '☀️', condition: '晴朗' },
        { icon: '⛅', condition: '多云' },
        { icon: '☁️', condition: '阴天' },
        { icon: '🌙', condition: '晴朗（夜）' }
      ]
      
      const randomWeather = isNightTime 
        ? weatherConditions[3] 
        : weatherConditions[Math.floor(Math.random() * 3)]
      
      weatherData.value = {
        icon: randomWeather.icon,
        temperature: Math.floor(Math.random() * 20) + 10,
        condition: randomWeather.condition,
        cloudCover: Math.floor(Math.random() * 100),
        humidity: Math.floor(Math.random() * 40) + 30,
        windSpeed: Math.floor(Math.random() * 30) + 5,
        pressure: Math.floor(Math.random() * 50) + 1000,
        airQuality: ['优', '良', '轻度污染', '中度污染'][Math.floor(Math.random() * 4)],
        airQualityLevel: Math.floor(Math.random() * 4)
      }
      
      // 生成可见天体
      const celestialObjects = [
        { name: '木星', icon: '♃' },
        { name: '土星', icon: '♄' },
        { name: '火星', icon: '♂' },
        { name: '金星', icon: '♀' },
        { name: '水星', icon: '☿' },
        { name: '仙女座', icon: '🪐' },
        { name: '猎户座', icon: '🏹' },
        { name: '天蝎座', icon: '♏' }
      ]
      
      // 夜晚显示更多天体
      const objectCount = isNightTime ? Math.floor(Math.random() * 4) + 4 : Math.floor(Math.random() * 2) + 1
      const shuffled = [...celestialObjects].sort(() => 0.5 - Math.random())
      visibleObjects.value = shuffled.slice(0, objectCount).map(obj => ({
        ...obj,
        altitude: `${Math.floor(Math.random() * 60) + 10}°`
      }))
      
      // 生成月相
      const moonPhases = [
        { icon: '🌑', text: '新月' },
        { icon: '🌒', text: '眉月' },
        { icon: '🌓', text: '上弦月' },
        { icon: '🌔', text: '盈凸月' },
        { icon: '🌕', text: '满月' },
        { icon: '🌖', text: '亏凸月' },
        { icon: '🌗', text: '下弦月' },
        { icon: '🌘', text: '残月' }
      ]
      
      moonPhase.value = moonPhases[Math.floor(Math.random() * moonPhases.length)]
      
      // 生成观测建议
      const suggestions = [
        { icon: '👁️', text: '建议使用双筒望远镜观测亮星' },
        { icon: '🔭', text: '推荐使用高倍率望远镜观测行星' },
        { icon: '🌙', text: '今晚月亮较亮，适合月面观测' },
        { icon: '🌌', text: '远离城市灯光以获得更好的观测体验' },
        { icon: '🧥', text: '夜间温度较低，请注意保暖' },
        { icon: '🌬️', text: '风速较大，可能影响观测稳定性' },
        { icon: '☁️', text: '云层较多，建议等待天气好转' },
        { icon: '✨', text: '观测条件极佳，适合深空天体摄影' }
      ]
      
      const suggestionCount = Math.floor(Math.random() * 3) + 2
      const shuffledSuggestions = [...suggestions].sort(() => 0.5 - Math.random())
      observingSuggestions.value = shuffledSuggestions.slice(0, suggestionCount)
    }
    
    // 计算属性
    const isNight = computed(() => {
      const hour = new Date().getHours()
      return hour < 6 || hour > 18
    })
    
    const currentLocalTime = computed(() => {
      return new Date().toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    })
    
    const sunriseTime = computed(() => {
      return '06:' + (Math.floor(Math.random() * 60)).toString().padStart(2, '0')
    })
    
    const sunsetTime = computed(() => {
      return '18:' + (Math.floor(Math.random() * 60)).toString().padStart(2, '0')
    })
    
    const sunPosition = computed(() => {
      if (sunAltitude.value < 0) return '地平线以下'
      return `高度: ${Math.abs(Math.round(sunAltitude.value))}°`
    })
    
    const moonVisibility = computed(() => {
      return moonAltitude.value < 0 ? '不可见' : `可见，高度: ${Math.round(moonAltitude.value)}°`
    })
    
    const bestObservingTime = computed(() => {
      return isNight 
        ? `今晚 ${20 + Math.floor(Math.random() * 3)}:00 - ${2 + Math.floor(Math.random() * 2)}:00` 
        : `今晚 ${19 + Math.floor(Math.random() * 2)}:00 开始`
    })
    
    const sunIcon = computed(() => {
      return sunAltitude.value < 0 ? '🌙' : '☀️'
    })
    
    const moonIcon = computed(() => {
      return moonPhase.value.icon
    })
    
    // 辅助函数
    const formatCoordinates = (lat, lon) => {
      const latDir = lat >= 0 ? 'N' : 'S'
      const lonDir = lon >= 0 ? 'E' : 'W'
      return `${Math.abs(lat).toFixed(4)}°${latDir}, ${Math.abs(lon).toFixed(4)}°${lonDir}`
    }
    
    const getPosition = (altitude, azimuth) => {
      // 简化的位置计算
      const normalizedAlt = Math.max(0, Math.min(1, (altitude + 90) / 180))
      const normalizedAz = (azimuth + 90) % 360 / 360
      
      return {
        x: normalizedAz * 100,
        y: (1 - normalizedAlt) * 100
      }
    }
    
    const getRandomPosition = () => {
      return {
        x: Math.random() * 80 + 10,
        y: Math.random() * 80 + 10
      }
    }
    
    return {
      locationData,
      isRequestingLocation,
      locationError,
      isLoading,
      manualLocation,
      observationQuality,
      isNight,
      currentLocalTime,
      sunriseTime,
      sunsetTime,
      sunPosition,
      moonVisibility,
      sunIcon,
      moonIcon,
      moonPhase,
      weatherData,
      visibleObjects,
      observingSuggestions,
      bestObservingTime,
      sunAltitude,
      sunAzimuth,
      moonAltitude,
      moonAzimuth,
      requestLocation,
      useManualLocation,
      refreshLocation,
      formatCoordinates,
      getPosition,
      getRandomPosition
    }
  }
}
</script>

<style scoped>
.location-detector-container {
  background: rgba(10, 10, 42, 0.85);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(85, 136, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.detector-header {
  text-align: center;
  margin-bottom: 24px;
}

.detector-header h3 {
  color: #ffffff;
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}

.detector-header p {
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-size: 14px;
}

/* 位置状态 */
.location-status {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

.location-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.location-status p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 16px;
  font-size: 16px;
}

.location-button {
  background: #5588ff;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.location-button:hover:not(:disabled) {
  background: #7aa5ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(85, 136, 255, 0.4);
}

.location-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-text {
  color: #ff6b6b;
  font-size: 14px;
  margin-bottom: 16px !important;
}

.location-tip {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.location-tip input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 6px 12px;
  color: #ffffff;
  margin: 0 8px;
  font-size: 14px;
}

.manual-button {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.manual-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 加载中 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(85, 136, 255, 0.3);
  border-radius: 50%;
  border-top-color: #5588ff;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-container p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* 信息卡片 */
.info-card {
  background: rgba(85, 136, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(85, 136, 255, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.card-header {
  background: rgba(85, 136, 255, 0.1);
  padding: 16px 20px;
  border-bottom: 1px solid rgba(85, 136, 255, 0.2);
}

.card-header h4 {
  color: #ffffff;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-content {
  padding: 20px;
}

/* 位置卡片 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item .label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-item .value {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
}

.refresh-button {
  background: rgba(85, 136, 255, 0.2);
  color: #5588ff;
  border: 1px solid rgba(85, 136, 255, 0.3);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.refresh-button:hover {
  background: rgba(85, 136, 255, 0.3);
  border-color: rgba(85, 136, 255, 0.5);
}

/* 观测条件卡片 */
.observing-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.condition-badge {
  padding: 12px 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.condition-badge.poor {
  background: rgba(255, 107, 107, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.condition-badge.fair {
  background: rgba(254, 202, 87, 0.2);
  border: 1px solid rgba(254, 202, 87, 0.3);
}

.condition-badge.good {
  background: rgba(72, 219, 251, 0.2);
  border: 1px solid rgba(72, 219, 251, 0.3);
}

.condition-badge.excellent {
  background: rgba(29, 209, 161, 0.2);
  border: 1px solid rgba(29, 209, 161, 0.3);
}

.condition-badge.perfect {
  background: rgba(155, 89, 182, 0.2);
  border: 1px solid rgba(155, 89, 182, 0.3);
}

.quality-text {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.quality-score {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.sky-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sky-icon {
  font-size: 48px;
}

.sky-time {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

/* 观测详情 */
.observing-details {
  display: grid;
  gap: 16px;
}

.detail-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.detail-header .icon {
  font-size: 20px;
}

.detail-header .title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.time-info {
  display: flex;
  gap: 20px;
  margin-bottom: 8px;
}

.time-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.time-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.time-value {
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
}

.sun-position {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.moon-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.moon-phase {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phase-icon {
  font-size: 24px;
}

.phase-text {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.moon-visibility {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.visible-objects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.object-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.object-icon {
  font-size: 16px;
}

.object-name {
  color: #ffffff;
  flex: 1;
}

.object-altitude {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* 天气卡片 */
.weather-overview {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.weather-icon {
  font-size: 48px;
}

.weather-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.temperature {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
}

.condition {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.environmental-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.env-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.env-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.env-value {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cloud-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.cloud-fill {
  height: 100%;
  background: linear-gradient(90deg, #5588ff, #7aa5ff);
}

.air-quality-0 {
  color: #1dd1a1;
}

.air-quality-1 {
  color: #48dbfb;
}

.air-quality-2 {
  color: #feca57;
}

.air-quality-3 {
  color: #ff6b6b;
}

/* 建议卡片 */
.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.suggestion-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: -2px;
}

.suggestion-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.5;
}

.best-time {
  background: rgba(85, 136, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(85, 136, 255, 0.2);
}

.best-time h5 {
  color: #5588ff;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.best-time p {
  color: #ffffff;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

/* 天空可视化 */
.visualization-container {
  margin-top: 24px;
}

.sky-chart {
  background: rgba(5, 5, 24, 0.7);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(85, 136, 255, 0.1);
}

.sky-chart h4 {
  color: #ffffff;
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.chart-content {
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.sky-dome {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #0a0a2a, #050518);
  border: 1px solid rgba(85, 136, 255, 0.2);
  border-radius: 8px;
}

.dome-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(85, 136, 255, 0.05) 1px, transparent 1px),
              linear-gradient(90deg, rgba(85, 136, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

.celestial-body {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 24px;
  animation: twinkle 2s infinite alternate;
}

.celestial-body.sun {
  font-size: 32px;
  animation: none;
}

.celestial-body.moon {
  font-size: 28px;
  animation: none;
}

.celestial-body.star {
  animation: twinkle 1.5s infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .observing-overview {
    flex-direction: column;
    gap: 16px;
  }
  
  .weather-overview {
    flex-direction: column;
    gap: 16px;
  }
  
  .environmental-details {
    grid-template-columns: 1fr 1fr;
  }
  
  .visible-objects {
    grid-template-columns: 1fr;
  }
  
  .chart-content {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .location-detector-container {
    padding: 16px;
  }
  
  .card-content {
    padding: 16px;
  }
  
  .time-info {
    flex-direction: column;
    gap: 8px;
  }
  
  .environmental-details {
    grid-template-columns: 1fr;
  }
  
  .sky-chart {
    padding: 16px;
  }
}
</style>